<template>
  <div class="tool-panel">
    <h3>工具</h3>
    <div class="content">
      <div class="tool-list">
        <div 
          v-for="(tool, index) in tools" 
          :key="index"
          class="tool-item"
          :class="{ active: activeTool === tool.name }"
          @click="handleToolClick(tool)"
        >
          <i :class="tool.icon"></i>
          <span>{{ tool.label }}</span>
        </div>
        <div 
          class="tool-item"
          draggable="true"
          @dragstart="handleDragStart($event, 'rect')"
        >
          <i class="el-icon-s-grid"></i>
          <span>矩形</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ToolPanel',
  data() {
    return {
      activeTool: '',
      tools: [
        { name: 'select', label: '选择', icon: 'el-icon-mouse' },
        { name: 'move', label: '移动', icon: 'el-icon-rank' },
        { name: 'text', label: '文本', icon: 'el-icon-edit' },
        { name: 'rectangle', label: '矩形', icon: 'el-icon-copy-document' },
        { name: 'circle', label: '圆形', icon: 'el-icon-circle-plus' },
        { name: 'line', label: '线条', icon: 'el-icon-minus' },
        { name: 'eraser', label: '橡皮擦', icon: 'el-icon-delete' },
        { name: 'zoom', label: '缩放', icon: 'el-icon-zoom-in' }
      ]
    };
  },
  methods: {
    handleToolClick(tool) {
      this.activeTool = tool.name;
      this.$emit('tool-selected', tool);
    },
    handleDragStart(event, type) {
      event.dataTransfer.setData('text/plain', JSON.stringify({
        type: 'shape',
        data: {
          type: type
        }
      }));
    }
  }
};
</script>

<style lang="scss" scoped>
.tool-panel {
  padding: 20px;
  
  h3 {
    margin-bottom: 20px;
  }

  .content {
    .tool-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      
      .tool-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background-color: #f5f7fa;
        }

        &.active {
          background-color: #ecf5ff;
          border-color: #409eff;
          color: #409eff;
        }

        i {
          font-size: 20px;
          margin-bottom: 5px;
        }

        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style> 